<template>
  <div class="login-component">
    <div class="qr-switch account" @click="$router.push({ name: 'LoginForAccount' })" />
    <div class="login-tab">
      <div class="login-tab-item active">微信登录</div>
    </div>
    <div class="qr-content">
      <div class="img-box">
        <img src="" alt="">
      </div>
      <div class="qr-login-tips">使用<strong>微信扫一扫</strong>登录</div>
    </div>
<!--    <el-button-->
<!--      :loading="loading"-->
<!--      size="default"-->
<!--      type="primary"-->
<!--      style="width: 100%;"-->
<!--      @click.native.prevent="handleLogin"-->
<!--    >登录</el-button>-->
    <div class="login-tool">
      <span class="forgot-button" @click="forgotPwd">忘记密码?</span>
      <span class="register-button" @click="forgotPwd">注册>></span>
    </div>
  </div>
</template>

<script>
import { validPhone } from '@/utils/validate'
export default {
  name: 'LoginForCode',
  components: {},
  mixins: [],
  props: {},
  data() {
    const validatePhone = (rule, value, callback) => {
      if (!validPhone(value)) {
        callback(new Error('请输入正确的手机号'))
      } else {
        callback()
      }
    }
    const validatePassword = (rule, value, callback) => {
      if (value.length < 6) {
        callback(new Error('密码需大于6位'))
      } else {
        callback()
      }
    }
    return {
      form: {
        cellphone: '',
        password: ''
      },
      autoLogin: true,
      rules: {
        cellphone: [{ required: true, trigger: 'blur', validator: validatePhone }],
        password: [{ required: true, trigger: 'blur', validator: validatePassword }]
      },
      loading: false,
      redirect: undefined
    }
  },
  computed: {},
  watch: {},
  created() {
  },
  mounted() {
  },
  methods: {
    handleLogin() {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.loading = true
          this.$store.dispatch('user/login', this.form).then(() => {
            this.$router.push({ path: this.redirect || '/' })
            this.loading = false
          }).catch(() => {
            this.loading = false
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    // 忘记密码
    forgotPwd() {
      this.$router.push({
        name: 'ResetPwd'
      })
    }
  }
}
</script>

<style scoped lang="scss">
@import "../../element-variables.scss";
.login-component {
  .qr-content {
    margin-bottom: 40px;
    .img-box {
      width: 80%;
      height: 200px;
      margin: 0 auto;
    }
    .qr-login-tips {
      color: #666;
      margin-top: 20px;
      font-size: 16px;
      text-align: center;
      strong {
        color: $--color-primary;
      }
    }
  }
}
</style>
